/**
*@Description: 选择展示选择器cell还是输入框
*@Author:lichunxue
*@Date:2020/09/15 16:48:51
*@todo:
*@param:{String}--tagType--'input':输入框;'select':选择器
*@param:{Boolean}--required--是否必填，true前面有红星
*@param:{String}--title--标题
*@param:{String}--value--默认展示值
*@param:{String}--value2--第二个选择框默认展示值
*@param:{String}--placeholder--输入框为空时展示
*@param:{String}--textAlign--输入框对齐方式，可选值为 center right left
*@param:{String}--rightText--输入框最右侧固定文本
*@param:{Boolean}--readonly--只读标志
*@param:{Array}--data--选择框数据源
*@param:{Array}--data2--第二个选择框数据源
*@param:{Number}--column--选择框可视化项目数量
*@param: blur--输入框失焦事件
*@param:confirm--第一个选择框点击确定事件
*@param:confirm2--第二个选择框点击确定事件
*@useage: <base-input-cell tagType="select" :required="required"
        :title="cellTitle" :value="cellValue" :data="datalist"
        @confirm="confirm">
      </base-input-cell>
      <base-input-cell tagType="input" :required="required" :rightText="rightText"
        :title="cellTitle" :value="cellValue" :placeholder="placeholder"
        @blur="blur">
      </base-input-cell>
*/
<template>
    <div class="base-input-cell">
        <!-- 输入框 -->
        <div v-if="tagType=='input'" class="base-input-row">
            <van-field v-if="inputType=='number'"
                :input-align="textAlign"
                v-model="inputValue"
                :label="title"
                :required="required"
                :placeholder="placeholder"
                :readonly="readonly"
                :name="name"
                :type="inputType"
                :formatter="formatter"
                @blur="blur"
            >
              <template #extra>
                  <span style="margin-left:8px;">{{rightText}}</span>
              </template>
            </van-field>
            <van-field v-else :input-align="textAlign"
                v-model="inputValue"
                :label="title"
                :required="required"
                :placeholder="placeholder"
                :readonly="readonly"
                :name="name"
                :type="inputType"
                @blur="blur"
            >
            <template #extra>
                <span style="margin-left:8px;">{{rightText}}</span>
            </template>
            </van-field>
        </div>
        <!-- 选择器 -->
        <div v-else-if="tagType=='select'" class="base-cell-row">
            <van-cell :is-link="!readonly"
                arrow-direction="down"
                :required="required"
                :title="title"
                :value="newValue"
            >
              <template>
                <!-- 目前只有出险原因走此流程 -->
                <span @click="click('3')" v-if="data2">{{newValue.length>6?newValue.substring(0,5)+'...':newValue}}</span>
                <span @click="click('1')" v-else>{{newValue.length>13?newValue.substring(0,12)+'...':newValue}}</span>
              </template>
              <!-- 使用 extra 插槽来自定义右侧内容，目前只有出险原因走此流程 -->
              <template #extra v-if="data2">
                <div class="base-cell-row-right-content">
                  <span @click="click('2')">{{newValue2.length>5?newValue2.substring(0,4)+'...':newValue2}}</span>
                  <img src='@assetsImgs/down.png' v-if="!readonly"/>
                </div>
              </template>
            </van-cell>
        </div>
        <div v-else>
          <slot></slot>
        </div>
        <van-action-sheet v-model="showSheet" :actions="pickerArray" @select="confirmSheet" />
        <!-- 选择框组件 -->
        <base-picker :showPicker.sync="showPicker" :dataSource="pickerArray"
         :selectedText="pickerValue" :column="column" @input="confirm"></base-picker>
    </div>
</template>
<script>
import { Field, ActionSheet } from 'vant';
import BasePicker from './BasePicker.vue';

export default {
  props: {
    tagType: {
      type: String,
    },
    required: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
    value: {
      type: [String, Number],
      default: '',
    },
    value2: {
      type: [String, Number],
      default: '',
    },
    placeholder: {
      type: String,
      default: '请输入',
    },
    inputType: {
      type: String,
    },
    textAlign: {
      type: String,
      default: 'right',
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
    },
    data2: {
      type: Array,
    },
    rightText: {
      type: String,
    },
    column: { // 可视化项目数量
      type: Number,
      required: false,
    },
    name: {
      type: String,
    },
  },
  components: {
    BasePicker,
    [Field.name]: Field,
    [ActionSheet.name]: ActionSheet,
  },
  data() {
    return {
      value1: '',
      inputValue: this.value,
      newValue: this.value === '' ? '请选择' : this.value,
      newValue2: this.value2 === '' ? '请选择' : this.value2,

      showPicker: false,
      showSheet: false,
      pickerArray: [],
      pickerValue: '',
      selectedCell: '',
    };
  },
  watch: {
    value(val) {
      this.inputValue = val;
    },
  },
  created() {
    // utils.logInfo(this.parentFormatter);
  },
  methods: {
    // 校验金额格式，必须是整数，小数点后保留两位
    formatter(value) {
      // 过滤输入的数字
      let index = value.indexOf('.');
      let num = value.indexOf('-');
      if (index === 0 || num === 0) {
        return '';
      } if (index > -1) { // 是小数
        return value.substring(0, index + 3);
      }
      return value;
    },
    //   输入框失焦事件-将值传给父组件
    blur() {
      this.$emit('blur', this.inputValue);
    },
    // 选择器点击事件-触发选择弹框
    click(flag) {
      if (this.readonly) {
        return;
      }
      if (flag === '1') {
        this.pickerArray = this.data;
        this.pickerValue = this.newValue;
        this.showPicker = true;
      } else if (flag === '2') {
        this.pickerArray = this.data2.map(el => ({
          name: el.text,
          value: el.value,
        }));
        this.showSheet = true;
      } else if (flag === '3') {
        this.pickerArray = this.data.map(el => ({
          name: el.text,
          value: el.value,
        }));
        this.showSheet = true;
      }
      this.selectedCell = flag;
    },
    confirm(text, value) {
      if (this.selectedCell === '1') {
        this.newValue = text;
        this.$emit('confirm', text, value);
      } else if (this.selectedCell === '2') {
        this.newValue2 = text;
        this.$emit('confirm2', text, value);
      }
    },
    confirmSheet(item) {
      this.showSheet = false;
      if (this.selectedCell === '2') {
        this.newValue2 = item.name;
        this.$emit('confirm2', item.name, item.value);
      } else {
        this.newValue = item.name;
        this.$emit('confirm', item.name, item.value);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.base-input-cell{
    border-bottom: 1px #E1E1E1 solid;
    // margin: 0 10px;
    text-align: left;
    .base-cell-row{
        .van-cell--clickable:active{
            background-color: #ffffff;
        }
        .van-cell__title{
            span{
                color: #2B2B2B;
                font-size: 14px;
            }
        }
        .van-cell__value{
            color: #2B2B2B;
            font-size: 14px;
        }
        .base-cell-row-right-content{
            width: 100px;
            text-align: right;
            margin-left: 5px;
            span{
              width: 80px;
              display: inline-block;
            }
            img{
              width: 15px;
              height: 8px;
              margin-left: 4px;
              vertical-align: top;
              margin-top: 8px;
            }
        }
    }
    .base-input-row{
        .van-field__label{
            span{
                color: #2B2B2B;
                font-size: 14px;
            }
        }
    }
}
</style>
